<template>
  <div>
    <!-- <input type="checkbox" v-model="checked" /> -->
    <input type="text" v-model="username" />
    <input type="radio" v-model="checked" value="1" />男性
    <input type="radio" v-model="checked" value="2" />女性
    <!-- <h1>{{ checked ? '选中' : '没有选中' }}</h1> -->
    <button @click="handleSubmit">点击提交</button>
  </div>
</template>
<script>
// 1.v-model的作用？
// 实现双向的数据绑定的
// 第一个方向：数据可以影响视图的展示
// 第二个方向：视图也可以影响数据

// 修饰符 .number  .lazy   .trim

// 判断数据框是否输入内容

// 第一个修饰符 .number 可以把输入框的内容转化成数字
// .lazy 修饰符的作用 => 改变数据更新的时机，默认情况下input事件触发的时候，实现更新
// 添加了lazy ， chang 的时候更新数据

export default {
  data() {
    return {
      username: '',
      const: '',
      checked: 1,
    }
  },
  methods: {
    input() {
      console.log('input事件被触发')
    },
  },
}
</script>
